<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Basic_tables</title>
<base href="${pagecontext.request.getcontextpath }/Cinema/admin/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!----webfonts--->
<link
	href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900'
	rel='stylesheet' type='text/css'>
<!---//webfonts--->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<%-- ${customerPage.list }
<c:forEach  items="${customerPage.list }"  var="name">
   <c:out value="${name}"/><p>
</c:forEach > --%>
	<div id="wrapper">
		<!-- Navigation -->
		<nav class="top1 navbar navbar-default navbar-static-top"
			role="navigation" style="margin-bottom: 0">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">Modern</a>
		</div>
		<!-- /.navbar-header -->
		<ul class="nav navbar-nav navbar-right">
			<li class="dropdown"><a href="#" class="dropdown-toggle"
				data-toggle="dropdown" aria-expanded="false"><i
					class="fa fa-comments-o"></i><span class="badge">4</span></a>
				<ul class="dropdown-menu">
					<li class="dropdown-menu-header"><strong>Messages</strong>
						<div class="progress thin">
							<div class="progress-bar progress-bar-success" role="progressbar"
								aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
								style="width: 40%">
								<span class="sr-only">40% Complete (success)</span>
							</div>
						</div></li>
					<li class="avatar"><a href="#"> <img src="images/1.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small> <span
							class="label label-info">NEW</span>
					</a></li>
					<li class="avatar"><a href="#"> <img src="images/2.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small> <span
							class="label label-info">NEW</span>
					</a></li>
					<li class="avatar"><a href="#"> <img src="images/3.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small>
					</a></li>
					<li class="avatar"><a href="#"> <img src="images/4.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small>
					</a></li>
					<li class="avatar"><a href="#"> <img src="images/5.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small>
					</a></li>
					<li class="avatar"><a href="#"> <img src="images/pic1.png"
							alt="" />
							<div>New message</div> <small>1 minute ago</small>
					</a></li>
					<li class="dropdown-menu-footer text-center"><a href="#">View
							all messages</a></li>
				</ul></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle avatar"
				data-toggle="dropdown"><img src="images/1.png" alt="" /><span
					class="badge">9</span></a>
				<ul class="dropdown-menu">
					<li class="dropdown-menu-header text-center"><strong>Account</strong>
					</li>
					<li class="m_2"><a href="#"><i class="fa fa-bell-o"></i>
							Updates <span class="label label-info">42</span></a></li>
					<li class="m_2"><a href="#"><i class="fa fa-envelope-o"></i>
							Messages <span class="label label-success">42</span></a></li>
					<li class="m_2"><a href="#"><i class="fa fa-tasks"></i>
							Tasks <span class="label label-danger">42</span></a></li>
					<li><a href="#"><i class="fa fa-comments"></i> Comments <span
							class="label label-warning">42</span></a></li>
					<li class="dropdown-menu-header text-center"><strong>Settings</strong>
					</li>
					<li class="m_2"><a href="#"><i class="fa fa-user"></i>
							Profile</a></li>
					<li class="m_2"><a href="#"><i class="fa fa-wrench"></i>
							Settings</a></li>
					<li class="m_2"><a href="#"><i class="fa fa-usd"></i>
							Payments <span class="label label-default">42</span></a></li>
					<li class="m_2"><a href="#"><i class="fa fa-file"></i>
							Projects <span class="label label-primary">42</span></a></li>
					<li class="divider"></li>
					<li class="m_2"><a href="#"><i class="fa fa-shield"></i>
							Lock Profile</a></li>
					<li class="m_2"><a href="#"><i class="fa fa-lock"></i>
							Logout</a></li>
				</ul></li>
		</ul>
		<form class="navbar-form navbar-right">
			<input type="text" class="form-control" value="Search..."
				onfocus="this.value = '';"
				onblur="if (this.value == '') {this.value = 'Search...';}">
		</form>
		<div class="navbar-default sidebar" role="navigation">
			<div class="sidebar-nav navbar-collapse">
				<ul class="nav" id="side-menu">
					<li><a href="index.html"><i
							class="fa fa-dashboard fa-fw nav_icon"></i>Dashboard</a></li>
					<li><a href="#"><i class="fa fa-laptop nav_icon"></i>Layouts<span
							class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="grids.html">Grid System</a></li>
						</ul> <!-- /.nav-second-level --></li>
					<li><a href="#"><i class="fa fa-indent nav_icon"></i>Menu
							Levels<span class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="graphs.html">Graphs</a></li>
							<li><a href="typography.html">Typography</a></li>
						</ul> <!-- /.nav-second-level --></li>
					<li><a href="#"><i class="fa fa-envelope nav_icon"></i>Mailbox<span
							class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="inbox.html">Inbox</a></li>
							<li><a href="compose.html">Compose email</a></li>
						</ul> <!-- /.nav-second-level --></li>
					<li><a href="widgets.html"><i class="fa fa-flask nav_icon"></i>Widgets</a>
					</li>
					<li><a href="#"><i class="fa fa-check-square-o nav_icon"></i>Forms<span
							class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="forms.html">Basic Forms</a></li>
							<li><a href="validation.html">Validation</a></li>
						</ul> <!-- /.nav-second-level --></li>
					<li><a href="#"><i class="fa fa-table nav_icon"></i>Tables<span
							class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="basic_tables.html">Basic Tables</a></li>
						</ul> <!-- /.nav-second-level --></li>
					<li><a href="#"><i class="fa fa-sitemap fa-fw nav_icon"></i>Css<span
							class="fa arrow"></span></a>
						<ul class="nav nav-second-level">
							<li><a href="media.html">Media</a></li>
							<li><a href="login.html">Login</a></li>
						</ul> <!-- /.nav-second-level --></li>
				</ul>
			</div>
			<!-- /.sidebar-collapse -->
		</div>
		<!-- /.navbar-static-side --> </nav>
		<div id="page-wrapper">
			<div class="col-md-12 graphs">
				<div class="xs">
					<h3>Basic Tables</h3>
					<div class="bs-example4" data-example-id="contextual-table">
						<table class="table">
							<thead>
								<tr>
									<th>#</th>
									<th>ID</th>
									<th>Account</th>
									<th>Nick Name</th>
									<th>Balance</th>
									<th>VIP</th>
									<th>Tel.</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${customerPage.list }" var="name" varStatus="status">
									<tr>
									<td>${status.index+1 }</td>
									<td>${name.customerId} </td>
									<td>${name.account} </td>
									<td>${name.nickName} </td>
									<td>${name.balance} </td>
									<td>${name.VIP} </td>
									<td>${name.phone} </td>
									</tr>
									<p>
								</c:forEach>
							<!-- 	<tr class="active">
									<th scope="row">1</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr class="success">
									<th scope="row">3</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr>
									<th scope="row">4</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr class="info">
									<th scope="row">5</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr>
									<th scope="row">6</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr class="warning">
									<th scope="row">7</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr>
									<th scope="row">8</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr>
								<tr class="danger">
									<th scope="row">9</th>
									<td>Column content</td>
									<td>Column content</td>
									<td>Column content</td>
								</tr> -->
							</tbody>
						</table>

						<a href="listCustomer/1">[1]</a>&nbsp;
						<c:if test="${customerPage.page!=1}">
							<c:choose>
								<c:when test="${customerPage.page<=5}">
									<c:forEach var="i" begin="2" end="${customerPage.page}">
										<a href="listCustomer/1">${i }</a>&nbsp;  
            </c:forEach>
								</c:when>
								<c:otherwise>  
            ...&nbsp;  
            <c:forEach var="i" begin="${customerPage.page-3}"
										end="${customerPage.page}">
										<a href="listCustomer/${i}">[${i }]</a>&nbsp;  
            </c:forEach>
								</c:otherwise>
							</c:choose>
							<c:choose>
								<c:when
									test="${customerPage.page>=customerPage.total-4   
            || customerPage.total<=0}">
									<c:forEach var="i" begin="${customerPage.page+1}"
										end="${customerPage.total}">
										<a href="listCustomer/${i}">[${i }]</a>&nbsp;  
            </c:forEach>
								</c:when>
								<c:otherwise>
									<c:forEach var="i" begin="${customerPage.page+1}"
										end="${customerPage.page+3}">
										<a href="listCustomer/${i}">[${i }]</a>&nbsp;  
            </c:forEach>  
            ...&nbsp;  
            <a href="listCustomer/${customerPage.total}">
										[${customerPage.total}]</a>&nbsp;  
        </c:otherwise>
							</c:choose>
						</c:if>
					</div>
					<div class="panel-body1">
						<table class="table">
							<thead>
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="panel panel-warning"
						data-widget="{&quot;draggable&quot;: &quot;false&quot;}"
						data-widget-static="">
						<div class="panel-body no-padding">
							<table class="table table-striped">
								<thead>
									<tr class="warning">
										<th>#</th>
										<th>First Name</th>
										<th>Last Name</th>
										<th>Username</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
									</tr>
									<tr>
										<td>2</td>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
									</tr>
									<tr>
										<td>3</td>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="panel panel-warning"
						data-widget="{&quot;draggable&quot;: &quot;false&quot;}"
						data-widget-static="">
						<div class="panel-heading">
							<h2>Warning Table</h2>
							<div class="panel-ctrls" data-actions-container=""
								data-action-collapse="{&quot;target&quot;: &quot;.panel-body&quot;}">
								<span class="button-icon has-bg"><i
									class="ti ti-angle-down"></i></span>
							</div>
						</div>
						<div class="panel-body no-padding" style="display: block;">
							<table class="table table-striped">
								<thead>
									<tr class="warning">
										<th>#</th>
										<th>First Name</th>
										<th>Last Name</th>
										<th>Username</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1</td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
									</tr>
									<tr>
										<td>2</td>
										<td>Jacob</td>
										<td>Thornton</td>
										<td>@fat</td>
									</tr>
									<tr>
										<td>3</td>
										<td>Larry</td>
										<td>the Bird</td>
										<td>@twitter</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="bs-example4" data-example-id="simple-responsive-table">
						<div class="table-responsive">
							<table class="table">
								<thead>
									<tr>
										<th>#</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
						<div class="table-responsive">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th>#</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
										<th>Table heading</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">1</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
									<tr>
										<th scope="row">2</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
									<tr>
										<th scope="row">3</th>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
										<td>Table cell</td>
									</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
					</div>
				</div>
				<div class="copy_layout">
					<p>
						Copyright &copy; 2015.Company name All rights reserved.More
						Templates <a href="http://www.cssmoban.com/" target="_blank"
							title="模板之家">模板之家</a> - Collect from <a
							href="http://www.cssmoban.com/" title="网页模板"
							target="_blank">网页模板</a>
					</p>
				</div>
			</div>
		</div>
		<!-- /#page-wrapper -->
	</div>
	<!-- /#wrapper -->
	<!-- Nav CSS -->
	<link href="css/custom.css" rel="stylesheet">
	<!-- Metis Menu Plugin JavaScript -->
	<script src="js/metisMenu.min.js"></script>
	<script src="js/custom.js"></script>
</body>
</html>
